checkLogin()

renderUsername()

logout()

async function getData() {
    const token = localStorage.getItem('token')
    // try {
        const res = await axios.get('/dashboard',{
            headers:{
                Authorization:token
            }
        })
        // console.log(res)
        
        const {overview,year,salaryData,groupData,provinceData} = res.data
        // console.log(overview)
        renderOverview(overview)
        // 渲染饼图
        renderSalaryData(salaryData)
        // 渲染折线图
        renderyear(year)
        // 双柱状图
        renderGroup(groupData)
        // 双饼图
        renderGrender(salaryData)
        // 地图
        renderProvince(provinceData)
        // 渲染就业薪资
        function renderOverview(overview) {
            Object.keys(overview).forEach(key=>{
                document.querySelector(`.${key}`).innerHTML = overview[key]
            })
        }
   
}
getData()

// 折线图
function renderyear(year){
     // 1.初始化 你想把图画在哪里就找那个标签
     const mychart = echarts.init(document.querySelector('#line'))
     // 2.配置项
     const option= {
      title:{
        text:('2022年全学科薪资走势'),
        top:
        20,
        left:
        20,
      
      },
      grid:{
        top:'20%'
      },
      xAxis: {
        type: 'category',
        data: year.map((el)=>{
            return el.month
        }),
        axisLine:{
            lineStyle:{
            type:'dashed'
        }
        }
    
      },
      // 鼠标悬停网格坐标轴显示提示框
      tooltip:{
        trigger:'axis'
      },
      yAxis: {
        type: 'value',
        splitLine:{
        lineStyle:{
        type:'dashed'
       }
      }
      },
      series: [
      {
       data: year.map((el)=>{
        return el.salary
       }),
       type: 'line',
       smooth: true,
       areaStyle:{
       color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
            offset: 0, color: '#5885E8' // 0% 处的颜色
            }, {
            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
            
       }
       },
       lineStyle:{
        width:7,
        color:{
            
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
            offset: 0, color: '#4B98EC' // 0% 处的颜色
            }, {
            offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        
        }
       },
        symbolSize:10
      }
      
    
      ]
     };
     // 3.使用配置型
     mychart.setOption(option)
}

// 饼图
function renderSalaryData(salaryData) {
    // 初始化
    const mychart = echarts.init(document.querySelector('#salary'))
    // 配置项
     const option = {
        title:{
            text:'班级薪资分布',
            left:'15',
            top:'15'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',

            // 饼图的大小
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,

            // 饼图各个小扇形的外边框线
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // 饼图的标签文字 默认是true 想要不显示必须写false
            label: {
              show: false,
            //   position: 'center'
            },
            // 高亮效果 鼠标悬停再饼图各个区域时的效果
            // emphasis: {
            //   label: {
            //     show: fasle,
            //     fontSize: 25,
            //     fontWeight: 'bold'
            //   }
            // },

            // 饼图标签文字的连接线
            // labelLine: {
            //   show: false
            // },

            data: salaryData.map(item=>({
                name:item.label,
                value:item.g_count + item.b_count
            }))
          }
        ],
        color:['#FDA226','#5097FF','#3ABDFA','#34D49A']
      };
    // 使用配置项
    mychart.setOption(option)
}

// 双柱状图
function renderGroup(groupData) {
    // 初始化
    const mychart = echarts.init(document.querySelector('#lines'))
    // 配置项
    const option = {
        xAxis: {
            type: 'category',
            data: groupData[1].map(item=>item.name),
            axisLine:{
                lineStyle:{
                type:'dashed'
            }
            },
        },

        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
            type:'dashed'
           }
          }
        },
        series: [
          {
            data: groupData[1].map(item=>item.hope_salary),
            type: 'bar',
            itemStyle:{
                color:{
                    type:'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#3fcf9c' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#cbf0e3' // 100% 处的颜色
                    }],
                        global: false // 缺省为 false
                }
            }
          },
          {
            data: groupData[1].map(item=>item.salary),
            type: 'bar',
            itemStyle:{
                color:{
                    type:'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#4b9deb' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#cee2f7' // 100% 处的颜色
                    }],
                        global: false // 缺省为 false
                }
            }
          }
        ],
        tooltip:{
            trigger:'item'
        }
      };
    //   使用配置项
    mychart.setOption(option)

      // 点击按钮 按钮高亮 切换柱状图数据
    document.querySelector('#btns').addEventListener('click',function(e) {
        if (e.target.classList.contains('btn')) {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')

            const num = e.target.innerHTML
            const data = groupData[num]
            option.xAxis.data=data.map(item=>item.name)
            option.series[0].data=data.map(item=>item.hope_salary)
            option.series[1].data=data.map(item=>item.salary)

            mychart.setOption(option)
        }
    })
}

// 双饼图
function renderGrender(salaryData) {
    const mychart = echarts.init(document.querySelector('#gender'))
    const option = {
        title:[
            {
                text:'男女薪资分布',
                left:10,
                top:10,
                textStyle:{
                    fontsize:16
                }
            },
            {
                text:'男生',
                left:'50%',
                top:'45%',
                textStyle:{
                    fontsize:12
                }
            },
            {
                text:'女生',
                left:'50%',
                top:'85%',
                textStyle:{
                    fontsize:12
                }
            }
        ],
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '30%'],
            center:['50%','30%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
            //   position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '30%'],
            center:['50%','70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
            //   position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };
      mychart.setOption(option)
}

// 地图
function renderProvince(provinceData){
  const dom = document.querySelector('#map')
  const myEchart = echarts.init(dom)
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]

  dataList.forEach(item=>{
    provinceData.forEach(res=>{
      if (res.name.includes(item.name)) {
        item.value = res.value
      }
    })
  })

  const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}

 